<style scoped>
</style>
<template>
  <div class="main_content_wrap" style="background-color:#fff;">
    <div class="main_content_title">RAW表配置</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <!-- <el-tab-pane label="INPUT链" name="INPUT">
        <common ref="child1"></common>
      </el-tab-pane> -->
      <el-tab-pane label="OUTPUT链" name="OUTPUT">
        <common ref="child2"></common>
      </el-tab-pane>
      <!-- <el-tab-pane label="FORWARD链" name="FORWARD">
        <common ref="child3"></common>
      </el-tab-pane> -->
      <el-tab-pane label="PREROUTING链" name="PREROUTING">
        <common ref="child4"></common>
      </el-tab-pane>
      <!-- <el-tab-pane label="POSTROUTING链" name="POSTROUTING">
        <common ref="child5"></common>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import etStatus from '../components/et-status/src/et-status.vue'
import common from './common.vue'
export default {
  components: { etStatus,common },
  component(){
    etStatus  
  },
  data(){
    return{
      activeName:'OUTPUT',
      tableName:'raw',
    }
  },
  mounted(){
    this.$refs.child2.intData(this.tableName,this.activeName);
  },
  methods:{
    handleClick(e){
      switch(e.name){
        case "INPUT":
          this.$refs.child1.intData(this.tableName,e.name);
          break;
        case "OUTPUT":
          this.$refs.child2.intData(this.tableName,e.name);
          break;
        case "FORWARD":
          this.$refs.child3.intData(this.tableName,e.name);
          break;
        case "PREROUTING":
          this.$refs.child4.intData(this.tableName,e.name);
          break;
        case "POSTROUTING":
          this.$refs.child5.intData(this.tableName,e.name);
          break;
      }
    }
  }
}
</script>
